<!--
 * @Description: 
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-10-29 10:38:58
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home" needLogin="false">
{
  style: {
    navigationBarTitleText: '董家芽塬村',
  },
}
</route>

<template>
  <view class="bg-#F5F5F5 overflow-hidden">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper indicator-dots circular autoplay>
        <swiper-item v-for="item in bannerList" :key="item.id">
          <image :src="item.attachmentUrl" @click="swiperDetail(item)"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 最新消息 -->
    <view class="bg-#fff my-14rpx overflow-hidden box-border">
      <view class="flex items-center justify-between px-20rpx py-10rpx">
        <view class="message-img w-100rpx h-100rpx mr-24rpx">
          <image src="../../static/images/message.png"></image>
        </view>
        <view
          class="flex items-center justify-between"
          @click="handleMessage('/pages/index/messageCenter')"
        >
          <view class="content">
            {{
              messageList[0]?.messageCenterDO ? messageList[0].messageCenterDO.title : '暂无消息'
            }}
          </view>
          <view v-if="messageList[0]?.messageCenterDO">
            <image class="w-36rpx h-36rpx" src="../../static/images/message-arrow.png"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 功能入口 -->
    <view class="bg-#fff flex items-center justify-around mb-14rpx p-20rpx">
      <!-- 三务公开入口 -->
      <view @click="handleThree('/pages/threeAffairs/index')">
        <view class="w-80rpx h-80rpx" style="margin: 0 auto">
          <image src="../../static/images/sanwu.png"></image>
        </view>
        <view class="function-title mt-12rpx">三务公开</view>
      </view>
      <!-- 党建入口 -->
      <view @click="handleBuliding('/pages/PartyBuilding/index')">
        <view class="w-80rpx h-80rpx" style="margin: 0 auto">
          <image src="../../static/images/building.png"></image>
        </view>
        <view class="function-title mt-12rpx">党建</view>
      </view>
      <!-- 地图导览入口 -->
      <view @click="handleMap">
        <view class="w-80rpx h-80rpx" style="margin: 0 auto">
          <image src="../../static/images/map.png"></image>
        </view>
        <view class="function-title mt-12rpx">地图导览</view>
      </view>
      <!-- 游客中心入口 -->
      <view @click="handleVisitorCenter">
        <view class="w-80rpx h-80rpx" style="margin: 0 auto">
          <image src="../../static/images/visitorcenter.png"></image>
        </view>
        <view class="function-title mt-12rpx">游客中心</view>
      </view>
      <!-- 游客中心管理入口 -->
      <view @click="handleTouristManagement('/pages/TouristManagement/index')">
        <view class="w-80rpx h-80rpx" style="margin: 0 auto">
          <image src="../../static/images/touristmanagement.png"></image>
        </view>
        <view class="function-title mt-12rpx">游客中心管理</view>
      </view>
    </view>
    <!-- 果蔬上市专区 -->
    <view
      class="m-10rpx p-10rpx flex justify-center fruit-express"
      style="position: relative; height: 640rpx"
    >
      <image
        class="h-180rpx w-90%"
        src="../../static/images/fruit-express.png"
        @click="handleFruit"
        style="position: absolute; left: 60rpx"
      ></image>
      <view
        class="flex items-center justify-between bg-#fff p-20rpx border-rd-16rpx"
        v-for="(item, index) in buyList"
        :key="item.id"
        @click="detailProducts(item.id)"
        style="position: absolute; top: 220rpx"
      >
        <view style="position: absolute; top: 10rpx; right: 20rpx">
          <image class="w-68rpx h-68rpx" src="../../static/images/fruit-buy.png"></image>
        </view>
        <view class="mr-20rpx" v-if="item.fileDOList && item.fileDOList.length != 0">
          <image class="w-166rpx h-140rpx border-rd-10rpx" :src="item.fileDOList[0]?.url"></image>
        </view>
        <view
          v-else
          class="mr-20rpx w-164rpx h-138rpx border-rd-10rpx"
          style="
            font-size: 28rpx;
            line-height: 140rpx;
            color: #333333;
            text-align: center;
            background-color: rgb(247 247 247);
            border: 1rpx solid #ccc !important;
          "
        >
          暂无图片
        </view>
        <view class="w-470rpx">
          <view class="ellipsis list-title">{{ item.remark }}</view>
          <view class="pr-20rpx flex my-10rpx" style="flex-wrap: wrap" v-if="item && item.tag">
            <view class="mr-8rpx" v-for="(tag, index) in item.tag" :key="index">
              <wd-tag
                color="#AD0E0E"
                bg-color="#AD0E0E"
                plain
                style="min-width: 40rpx; text-align: center; display: block"
              >
                {{ tag }}
              </wd-tag>
            </view>
          </view>
          <view class="flex w-100%">
            <view class="list-kg">量（kg）：</view>
            <view class="list-weight">{{ item.quantity }}</view>
          </view>
        </view>
      </view>
      <view
        class="flex items-center justify-between bg-#fff p-20rpx border-rd-16rpx"
        v-for="(item, index) in sellList"
        :key="item.id"
        @click="detailProducts(item.id)"
        style="position: absolute; top: 420rpx"
      >
        <view style="position: absolute; top: 10rpx; right: 20rpx">
          <image class="w-68rpx h-68rpx" src="../../static/images/fruit-sell.png"></image>
        </view>
        <view class="mr-20rpx" v-if="item.fileDOList && item.fileDOList.length != 0">
          <image class="w-166rpx h-140rpx border-rd-10rpx" :src="item.fileDOList[0]?.url"></image>
        </view>
        <view
          v-else
          class="mr-20rpx w-164rpx h-138rpx border-rd-10rpx"
          style="
            font-size: 28rpx;
            line-height: 140rpx;
            color: #333333;
            text-align: center;
            background-color: rgb(247 247 247);
            border: 1rpx solid #ccc !important;
          "
        >
          暂无图片
        </view>
        <view class="w-470rpx">
          <view class="ellipsis list-title">{{ item.remark }}</view>
          <view class="pr-20rpx flex my-10rpx" style="flex-wrap: wrap" v-if="item && item.tag">
            <view class="mr-8rpx" v-for="(tag, index) in item.tag" :key="index">
              <wd-tag
                color="#AD0E0E"
                bg-color="#AD0E0E"
                plain
                style="min-width: 40rpx; text-align: center; display: block"
              >
                {{ tag }}
              </wd-tag>
            </view>
          </view>
          <view class="flex w-100%">
            <view class="list-kg">量（kg）：</view>
            <view class="list-weight">{{ item.quantity }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 资讯 -->
    <view class="bg-#fff border-rd-14rpx p-20rpx">
      <wd-tabs v-model="tab" slidable-num="4" @click="handleClick">
        <block v-for="item in classList" :key="item.id">
          <wd-tab :title="item.label">
            <view v-if="showContent">
              <view v-for="item in contentList" :key="item.id">
                <view class="mb-40rpx" @click="informationDetail(item.id)">
                  <view class="flex items-center justify-between">
                    <view class="w-500rpx">
                      <view class="tab-title">
                        {{ item.topic }}
                      </view>
                      <view class="flex items-center tab-time">
                        <view class="mr-20rpx">
                          {{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}
                        </view>
                        <view>阅读量：{{ item.viewerCount }}</view>
                      </view>
                    </view>
                    <view class="w-158rpx h-110rpx border-rd-24rpx">
                      <image
                        class="w-100% h-100% border-rd-12rpx"
                        :src="item.attachmentUrl"
                      ></image>
                    </view>
                  </view>
                </view>
                <view class="tab-line"></view>
              </view>
            </view>
            <view v-else class="no-content">暂无咨询</view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  getbannerPage,
  getClassify,
  getClassifyContent,
  getMessage,
  getfreshFruitPage,
} from '@/service/index/index'
import { formatTime } from '@/utils/index'
import { useIsLogined } from '@/hooks/useIsLogined'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const residentId = computed(() => userStore.userInfo.residentId)
const isLogined = computed(() => userStore.userInfo.isLogined)
const { updateStatus } = useIsLogined()
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const tab = ref<number>(0)
const showLink = ref(false)
const buyList = ref([])
const sellList = ref([])
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
  carouselImageType: '小程序首页',
})

const max = ref<number>(60)
const bannerList = ref([])
const classList = ref([])
const contentList = ref([])
const showContent = ref(true)
const messageList = ref([])
// 获取轮播图
async function getbannerList() {
  const data: any = await getbannerPage({ ...pages })
  bannerList.value = data.data.list
  max.value = data.data.total
  bannerList.value = bannerList.value.map((item) => {
    item.attachmentUrl = `${baseurl.value}${item.attachmentUrl}`
    return item
  })
}

const params = reactive({
  pageNo: 1,
  pageSize: 100,
  dictType: 'countryside_app_article_type',
})
// 获取咨询tab
async function getClassifyList() {
  const data: any = await getClassify({ ...params })
  classList.value = data.data.list
  if (classList.value.length > 0) {
    record.articleType = Number(classList.value[0].value)
    getContent()
  }
}
const record = reactive({
  pageNo: 1,
  pageSize: 100,
  articleType: 0,
})
// tab
const handleClick = (e) => {
  tab.value = e.index
  classList.value.forEach((item, index) => {
    if (index === tab.value) {
      record.articleType = Number(item.value)
    }
  })
  getContent()
}
// isPartyMember
const isPartyMember = computed(() => userStore.userInfo.isPartyMember)
const jurisdiction = computed(() => userStore.userInfo.type !== 'tourist')
// 获取资讯内容
async function getContent() {
  const data: any = await getClassifyContent({ ...record })
  contentList.value = data.data.list
  showContent.value = contentList.value.length > 0
  contentList.value = contentList.value.map((item) => {
    item.attachmentUrl = `${baseurl.value}${item.attachmentUrl}`
    return item
  })
}
const query = reactive({
  pageNo: 1,
  pageSize: 100,
  userIds: residentId.value,
})
// 获取消息分页
async function getMessageList() {
  const data: any = await getMessage({ ...query })
  messageList.value = data.data.list
}

defineOptions({
  name: 'Home',
})
const buyData = reactive({
  pageNo: 1,
  pageSize: 10,
  demand: '我要买',
  remark: '',
})
async function getBuyData() {
  const data: any = await getfreshFruitPage({ ...buyData })
  if (data.data.list.length === 0) {
    return
  }
  buyList.value.push(data.data.list[0])
  data.data.list.forEach((item) => {
    if (item.tag) {
      item.tag = item.tag.split(',')
    }
    if (item.fileDOList) {
      item.fileDOList = item.fileDOList.reverse().map((item) => {
        item.url = `${baseurl.value}${item.url}`
        return item
      })
    }
  })
}

const sellData = reactive({
  pageNo: 1,
  pageSize: 10,
  demand: '我要卖',
  remark: '',
})
async function getSellData() {
  const data: any = await getfreshFruitPage({ ...sellData })
  if (data.data.list.length === 0) {
    return
  }
  sellList.value.push(data.data.list[0])
  data.data.list.forEach((item) => {
    if (item.tag) {
      item.tag = item.tag.split(',')
    }
    if (item.fileDOList) {
      item.fileDOList = item.fileDOList.reverse().map((item) => {
        item.url = `${baseurl.value}${item.url}`
        return item
      })
    }
  })
}
// 三务公开
const handleThree = (url) => {
  uni.navigateTo({ url })
}
// 鲜果专区
const handleFruit = () => {
  uni.navigateTo({ url: '/pages/FruitMarket/index' })
}
// 党建
const handleBuliding = (url) => {
  uni.navigateTo({ url })
}
// 游客中心
const handleVisitorCenter = () => {
  uni.navigateTo({
    url: '/pages/TouristManagement/webView',
  })
}
// 地图导览
const handleMap = () => {
  uni.navigateTo({
    url: '/pages/index/webMap',
  })
}

// 游客中心管理
const handleTouristManagement = (url) => {
  // if (jurisdiction.value) {
  //   uni.navigateTo({ url })
  // } else {
  //   uni.showToast({
  //     title: '暂无权限',
  //     icon: 'error',
  //     duration: 1000,
  //   })
  // }
  uni.navigateTo({ url })
}

// 消息通知
const handleMessage = (url) => {
  // if (jurisdiction.value) {
  //   uni.navigateTo({ url })
  // } else {
  //   uni.showToast({
  //     title: '暂无权限',
  //     icon: 'error',
  //     duration: 1000,
  //   })
  // }
  uni.navigateTo({ url })
}
// 轮播
const swiperDetail = (val) => {
  if (val.linkAddr) {
    uni.navigateTo({
      url: `/pages/index/webView?url=${val.linkAddr}`,
    })
  } else {
    uni.navigateTo({
      url: '/pages/index/swiperDetails?id=' + val.id,
    })
  }
}
// 果蔬详情
const detailProducts = (id) => {
  uni.navigateTo({
    url: '/pages/FruitMarket/productDetails?id=' + id,
  })
}
// 资讯
const informationDetail = (id) => {
  uni.navigateTo({
    url: '/pages/index/InformationDetails?id=' + id,
  })
}
const fetchData = async () => {
  await getBuyData()
  await getSellData()
}
// 测试 uni API 自动引入
onLoad(() => {
  showLink.value = false
  getbannerList()
  getClassifyList()
})
onShow(() => {
  fetchData()
  updateStatus()
  query.userIds = residentId.value
  if (residentId.value) getMessageList()
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style lang="scss">
.swiper-container {
  width: 100%;
  height: 400rpx;
}
.home-title {
  font-size: 40rpx;
  color: rgb(16, 16, 16);
  text-align: center;
}
::v-deep.wd-tabs__line {
  display: none;
}
::v-deep.wd-tabs__nav-item.is-active {
  margin-bottom: 8rpx;
  font-weight: normal !important;
  color: rgba(2, 150, 105, 1) !important;
  border-bottom: 6rpx solid rgba(2, 150, 105, 1) !important;
}
::v-deep.wd-tabs__nav-item {
  height: 64rpx !important;
  font-size: 32rpx !important;
}
::v-deep.wd-tabs__nav {
  margin-bottom: 20rpx;
}
::v-deep.wd-tabs.is-slide .wd-tabs__nav-item {
  padding: 0 !important;
}

::v-deep.wd-tabs__nav-item {
  margin: 0 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep.wd-tabs__nav-item:first-child {
  margin-left: 0px;
}

.message-title {
  width: 490rpx;
  margin-right: 24rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
}

.function-title {
  font-size: 26rpx;
  color: rgba(16, 16, 16, 1);
  text-align: center;
  white-space: nowrap;
}
.tab-line {
  height: 1rpx;
  margin: 30rpx 0;
  border-top: 1rpx solid rgba(207, 207, 207, 1);
}
.tab-title {
  display: -webkit-box;
  margin-bottom: 40rpx;
  overflow: hidden;
  font-size: 32rpx;
  line-height: 40rpx;
  color: rgba(10, 10, 10, 1);
  text-align: left;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tab-time {
  font-size: 26rpx;
  line-height: 40rpx;
  color: rgba(146, 146, 146, 1);
  text-align: left;
}

.notices-text {
  width: 500rpx;
  height: 50rpx;
}

.notices-text-List {
  line-height: 50rpx;
  text-align: left;
}

.content {
  width: 540rpx;
  overflow: hidden;
  font-size: 28rpx;
  font-weight: 400;
  color: #222222;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-content {
  margin-top: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(146, 146, 146, 1);
  text-align: center;
}

.list-title {
  width: 410rpx;
  line-height: 40rpx;
  color: rgba(42, 42, 42, 1);
  font-size: 28rpx;
  text-align: left;
  font-weight: 550;
}
.list-kg {
  line-height: 40rpx;
  color: rgba(48, 48, 48, 1);
  font-size: 28rpx;
  text-align: left;
}
.list-weight {
  line-height: 40rpx;
  color: rgba(228, 8, 8, 1);
  font-size: 36rpx;
  text-align: left;
  font-weight: 500;
}
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 19px;
  line-height: 19px;
  width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 24rpx;
}
/* 动画 */
.prompt {
  width: 100%;
  height: 160rpx;
  position: fixed;
  bottom: 50vh;
}

.prompt text {
  position: absolute;
  bottom: 2px;
  color: white;
  left: calc(45%);
  animation: puls 1.5s infinite ease-in-out;
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 45%;
  position: absolute;
  bottom: 0px;
  left: calc(27.5%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 40rpx;
}

.dot {
  height: 28rpx;
  width: 28rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
  background-image: linear-gradient(#5396ff, #aedaff);
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #66a3ff;
    box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #add8ff;
    box-shadow: 0 0 0 10px rgba(174, 218, 255, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #66a3ff;
    box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
  }
}

@keyframes puls {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}
.fruit-express {
  border-radius: 14px 14px 0px 0px;
  background: linear-gradient(
    120.7deg,
    rgba(215, 250, 177, 1) -0.01%,
    rgba(152, 208, 97, 1) 85.02%
  );
}
</style>
